import React from 'react'
import {  } from 'antd';
import {  } from '@ant-design/icons';

import './Home.css'

import GoodsAmount from './components/GoodsAmount'
import Line from './components/Line'
import Hybrid  from './components/Hybrid'

/* 
  首页路由Home
*/
export default function Home() {

  const task={current:12,data:[
    {key:0,title:'设计初版',desc:['参考视频原型']},
    {key:1,title:'完成简易服务器',desc:['连接MongoDB数据库','创建集合','生成模拟数据']},
    {key:2,title:'登录功能设计',desc:['页面排版','权限验证','登录验证','菜单权限展示']},
    {key:3,title:'头部设计',desc:['展示用户','展示路由title','展示当前时间','展示当前位置天气情况','退出登录']},
    {key:4,title:'左侧菜单设计',desc:['用户权限展示相应菜单']},
    {key:5,title:'前端路由设计',desc:['登录拦截']},
    {key:6,title:'Redux状态管理',desc:['管理登录用户数据','管理左侧菜单数据']},
    {key:7,title:'商品页面设计',desc:['品类管理页面排版','商品管理页面排版']},
    {key:8,title:'用户管理设计',desc:['页面排版']},
    {key:9,title:'角色管理设计',desc:['页面排版']},
    {key:10,title:'图形图表页面设计',desc:['柱形图页面排版','线形图页面排版','饼形图页面排版']},
    {key:11,title:'首页页面设计',desc:['页面排版','复合组件设计']},
    {key:12,title:'404页面设计',desc:['页面排版']},
    {key:13,title:'测试',desc:['登录测试','接口测试','路由跳转测试','功能测试']},
  ]}
  const months=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug','Sep','Oct','Nov','Dec']
  const types=['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  const shops=['小米','华为','Apple','三星','联想']
  const goods=['笔记本电脑', '手机', '其它']
  function getRadomArr(index,min=1000,max=5000){
    let offsetValue=parseInt(Math.random()*1000)
    let OSV=parseInt(Math.random()*11)%2===0?offsetValue:-offsetValue
    let now=new Date()
    let count=(new Date(now.getFullYear(),index,0)).getDate()
    return Array(count).fill(0).reduce(pre=>{pre.push(parseInt(Math.random()*(max-min)+min)+OSV);return pre},[]) 
  }
  const getData=()=>{
    return Array(12).fill(0).map((_,index)=>{
      return {
        month:index+1,
        name:months[index],
        data:types.map(i=>({name:i,data:getRadomArr(index+1)}))
      }
    })
  }
  const getSaleData=()=>{
    return Array(12).fill(0).map((_,index)=>{
      return {
        month:index+1,
        name:months[index],
        data:shops.map(i=>({name:i,data:goods.map(i=>({name:i,data:getRadomArr(index+1)}))}))
      }
    })
  }

  const data=getData()
  const sale_data=getSaleData()

  return (
    <div className="home">
      <div className='home-row1'>
        <GoodsAmount title='商品总量' tip={(<><p>1.xxxxx</p><p>2.xxxxx</p><p>3.xxxxx</p></>)}></GoodsAmount>
        <Line {...{data,months,types}} className='home-line-chart'></Line>
      </div>
      <div className='home-row2'>
        <Hybrid {...{data,months,types,task,sale_data}}></Hybrid>
      </div>
      
    </div>
  )
}
